import Icon from '@/components/Icon'
import styles from './index.module.scss'
import dayjs from 'dayjs'

type Props = {
  comment: any
}

export default function CommentItem({ comment }: Props) {
  if (!comment.aut_name) return <h3>这里是评论列表</h3>
  return (
    <div className={styles.root}>
      {/* 评论者头像 */}
      <div className='avatar'>
        <img src={comment.aut_photo} alt='' />
      </div>

      <div className='comment-info'>
        {/* 评论者名字 */}
        <div className='comment-info-header'>
          <span className='name'>{comment.aut_name}</span>

          {/* 关注或点赞按钮 */}
          <span className='thumbs-up'>
            {comment.like_count}
            <Icon type={comment.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
          </span>
        </div>

        {/* 评论内容 */}
        <div className='comment-content'>{comment.content}</div>

        <div className='comment-footer'>
          {/* 回复按钮 */}

          <span className='replay'>
            {comment.reply_count}回复 <Icon type='iconbtn_right' />
          </span>

          {/* 评论日期 */}
          <span className='comment-time'>{dayjs(comment.pubdate).fromNow()}</span>
        </div>
      </div>
    </div>
  )
}
